<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录-柚聊</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <!-- 加载动画 -->
  <div class="loading-screen" id="loadingScreen">
    <div class="loader"></div>
    <div class="loading-text">登录页面正在加载,请稍等片刻...</div>
  </div>

<!--导航栏-->
<div class="nav">
    <div class="nav-brand">
        <svg t="1762146198299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10957" width="200" height="200"><path d="M897.024 403.456c43.008 22.528 71.68 65.536 71.68 114.688v206.848c0 71.68-59.392 129.024-135.168 129.024h-4.096V962.56L634.88 854.016h-92.16c-30.72 0-61.44-10.24-83.968-28.672L542.72 768H716.8c92.16 0 176.128-67.584 176.128-176.128V403.456h4.096z" fill="#DAE9FF" p-id="10958"></path><path d="M270.336 720.896h-59.392c-71.68 0-131.072-59.392-131.072-131.072v-337.92c0-71.68 59.392-131.072 131.072-131.072h499.712c71.68 0 131.072 59.392 131.072 131.072v339.968c0 71.68-57.344 131.072-131.072 131.072H532.48" fill="#FFFFFF" p-id="10959"></path><path d="M245.76 245.76h430.08c22.528 0 40.96 18.432 40.96 40.96v286.72c0 22.528-18.432 40.96-40.96 40.96H245.76c-22.528 0-40.96-18.432-40.96-40.96V286.72c0-22.528 18.432-40.96 40.96-40.96z" fill="#DAE9FF" p-id="10960"></path><path d="M378.88 389.12c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m143.36 0c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m-133.12 81.92c0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48 8.192 20.48 20.48 20.48 20.48-8.192 20.48-20.48 8.192-20.48 20.48-20.48S512 458.752 512 471.04c0 34.816-26.624 61.44-61.44 61.44s-61.44-26.624-61.44-61.44z" fill="#3988FF" p-id="10961"></path><path d="M710.656 120.832H210.944c-71.68 0-131.072 59.392-131.072 131.072v339.968c0 71.68 59.392 131.072 131.072 131.072h100.352v-61.44h-98.304c-38.912 0-69.632-30.72-69.632-69.632V251.904c0-38.912 30.72-69.632 69.632-69.632h499.712c38.912 0 69.632 30.72 69.632 69.632v339.968c0 38.912-30.72 69.632-69.632 69.632h-194.56l-157.696 102.4-36.864 24.576 32.768 49.152L532.48 722.944h178.176c71.68 0 131.072-59.392 131.072-131.072V251.904c0-71.68-59.392-131.072-131.072-131.072z" fill="#3889FF" p-id="10962">
        </path>
      </svg>
        柚聊
    </div>
    <ul class="nav-menu">
        <li><a href="help.html" id="help-link"><i class="fas fa-question-circle"></i> 帮助</a></li>
        <li><a href="about.html" id="about-link"><i class="fas fa-info-circle"></i> 关于聊天室</a></li>
    </ul>
</div>

  <!--登录表单-->
  <div class="login-container" id="loginContainer">
    <div class="login-dialog">
      <h3>登录您的账户</h3>

      <form id="login-form">

        <div class="row">
          <label for="username">用户名</label>
          <input type="text" id="username" placeholder="请输入您的用户名">
          <div class="hint">用户名应为您注册时的用户名</div>
          <div class="error-message" id="username-error">请输入有效的用户名</div>
        </div>

        <div class="row">
          <label for="password">密码</label>
          <input type="password" id="password" placeholder="请输入您的密码">
          <div class="hint">密码长度至少为6个字符</div>
          <div class="error-message" id="password-error">密码不能为空</div>
        </div>

        <div class="row">
          <button type="button" id="submit">登录</button>
        </div>

      </form>

        <div class="additional-links">
                <a href="forget_password.html">忘记密码?</a>
                <span>|</span>
                <a href="register.html">注册新账户</a>
        </div>
        
    </div>
  </div>

  <!--引入一个jquery-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

  <!--实现前后端交互的逻辑-->
  <script>
      //确保dom完全加载后再执行js代码,避免在元素加载完成前绑定事件
    $(document).ready(function() {
      // 页面加载完成后隐藏加载动画，显示登录表单
      setTimeout(function() {
        $('#loadingScreen').addClass('hidden');
        $('#loginContainer').addClass('visible');
      }, 2000); // 2秒后显示登录页面

      //统一使用jquery选择器
      $('#submit').click(function(){
        let username = $('#username').val();
        let password = $('#password').val();

        // 重置错误状态
        $('.error-message').hide();
        $('input').removeClass('error');

        // 前端验证
        let hasError = false;
        
        if(username == '') {
          $('#username-error').text('请输入用户名').show();
          $('#username').addClass('error');
          hasError = true;
        }
        
        if(password == '') {
          $('#password-error').text('请输入密码').show();
          $('#password').addClass('error');
          hasError = true;
        } else if(password.length < 6) {
          $('#password-error').text('密码长度至少大于6个字符').show();
          $('#password').addClass('error');
          hasError = true;
        }

        if(hasError) {
          return;
        }

        // 显示加载状态
        $('#submit').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 登录中...');

        $.ajax({
          url: '/login',
          type: 'post',
          data: {
            username: username,
            password: password
          },
          success: function(response){
    // 恢复按钮状态
      $('#submit').prop('disabled', false).html('登录');
      
      // 根据新的后端响应格式处理
      if(response && response.success) {
          // 登录成功 - 存储用户信息
          if (response.data) {
              localStorage.setItem('token', response.data.token || response.token);
              localStorage.setItem('currentUser', JSON.stringify({
                  userId: response.data.userId || response.userId,
                  username: response.data.username || response.username,
                  nickname: response.data.nickname || response.nickname
              }));
          } else {
              // 如果后端返回的数据结构不同，根据实际情况调整
              localStorage.setItem('token', response.token);
              localStorage.setItem('currentUser', JSON.stringify({
                  userId: response.userId,
                  username: response.username,
                  nickname: response.nickname
              }));
          }
          
          // 登录成功
          showMessage('success', response.message || '登录成功！');
          setTimeout(function() {
              // 使用 replace 而不是 assign，避免回退到登录页
              window.location.replace('/client1.html');
          }, 1000);
      } else {
          // 登录失败，显示具体错误信息
          let errorMessage = response.message || "登录失败，请检查用户名和密码";
          
          // 根据错误类型显示不同的提示
          if (errorMessage.includes('用户名不存在')) {
              $('#username-error').text('用户名不存在').show();
              $('#username').addClass('error');
              showMessage('error', '用户名不存在，请检查用户名或注册新账户');
          } else if (errorMessage.includes('密码错误')) {
              $('#password-error').text('密码错误').show();
              $('#password').addClass('error');
              showMessage('error', '密码错误，请检查密码或使用忘记密码功能');
          } else if (errorMessage.includes('密码长度')) {
              $('#password-error').text('密码长度至少大于6个字符').show();
              $('#password').addClass('error');
              showMessage('error', '密码长度必须至少6个字符');
          } else {
              showMessage('error', errorMessage);
          }
      }
  },

        });
      });


      // 自定义消息提示函数
      function showMessage(type, message) {
        // 移除可能已存在的消息
        $('.custom-message').remove();
        
        // 创建消息元素
        const messageEl = $('<div class="custom-message"></div>')
          .text(message)
          .addClass(type === 'success' ? 'success-message' : 'error-message');
        
        // 添加到页面
        $('body').append(messageEl);
        
        // 显示消息
        setTimeout(function() {
          messageEl.addClass('show');
        }, 10);
        
        // 自动隐藏消息
        setTimeout(function() {
          messageEl.removeClass('show');
          setTimeout(function() {
            messageEl.remove();
          }, 300);
        }, 4000);
      }

      // 输入时清除错误状态
      $('#username, #password').on('input', function() {
        $(this).removeClass('error');
        $(this).siblings('.error-message').hide();
      });
    });

  </script>

</body>
</html>